<!-- meta tags and other links -->
<!-- Header -->
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title> Viserpet HTML Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/picture/favicon.png">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <!-- Slick -->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!-- line awesome -->
    <link rel="stylesheet" href="assets/css/line-awesome.min.css">
    <!-- countdown css link-->
    <link rel="stylesheet" href="assets/css/jquery.classycountdown.min.css">
    <!-- range css -->
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <!-- magnific css link -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- Main css -->
    <link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
    
<!--==================== Preloader Start ====================-->
<div class="preloader">
    <div class="loader-p"></div>
  </div>
<!--==================== Preloader End ====================-->

<!--==================== Overlay Start ====================-->
<div class="body-overlay"></div>
<!--==================== Overlay End ====================-->

<!--==================== Sidebar Overlay End ====================-->
<div class="sidebar-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->

<!-- ==================== Scroll to Top End Here ==================== -->
<a class="scroll-top"><i class="fas fa-angle-double-up"></i></a>
<!-- ==================== Scroll to Top End Here ==================== -->

<!-- ==================== Header Top two Start Here ==================== -->
<div class="header-top-two">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-between">    
                <h6 class="header-two__text">Welcome to ViserPet!</h6>
            <div class="d-flex flex-wrap justify-content-between">
                  <ul class="social-list style-two">
                    <li class="social-list__item"><a href="javascript:;" class="social-list__link"><i class="fab fa-facebook-f"></i></a> </li>
                    <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-twitter"></i></a></li>
                    <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-linkedin-in"></i></a></li>
                    <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-pinterest-p"></i></a></li>
                  </ul>
                <div class="currency-box">
                    <select class="select text-white">
                        <option selected="">USD</option>
                        <option value="1">EURO</option>
                        <option value="2">RUPI</option>
                        <option value="3">DINAR</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ==================== Header Top End Here ==================== -->

<!-- ==================== Bottom Header End Here ==================== -->
<header class="header-two">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand " href="index.html">
                <span class="logo">
                    <img src="assets/picture/h2-logo.png" alt="">
                </span>
            </a>
            <button class="navbar-toggler header-button style-two" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span id="hiddenNav"><i class="las la-bars"></i></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-menu m-auto style-two">
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Home <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                        <ul class="dropdown-menu style-two">
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index.html"> Home One </a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href=""> Home Two </a>
                            </li>
                        </ul>
                    </li> 
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="about.html">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Pages <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                        <ul class="dropdown-menu style-two">
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="product-category.html">Product Category</a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="product-two-details.html">Product Details</a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="check-out.html"> Check Out</a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="faq.html"> Faq </a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="javascript:;"> Error Page </a></li>
                        </ul>
                    </li>

                        <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                           <ul class="dropdown-menu style-two">
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog.html"> Blog </a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog-details.html"> Blog Details </a>
                          </li>
                           </ul>
                        </li> 
  
                    <li class="nav-item">
                      <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                </ul>
            </div>
            <div class="header-info style-two">
                <div class="toggle-search-box style-two">
                    <button type="button" class="toggle-button style-two" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                </div>
              <div class="header-info__cart">
                     <a href="cart.html" class="header-info__link"><i class="fas fa-shopping-cart"></i></a>
                     <span class="header-info__cart-quantity">03</span>
              </div>
              <div class="header-info__user">
                <a href="login.html" class="header-info__link"><i class="far fa-user"></i></a>
             </div>
           </div>
        </nav>
    </div>
  </header>
  <!-- ==================== Bottom Header End Here ==================== -->
  
   <!--========================== Search Modal Start ==========================-->
   <div class="overlay-search-box position-relative">
    <div class="modal fade" id="search-box" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="search-overlay-close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="search-box">
                                    <div class="input--group">
                                        <input type="text" class="form--control style-two" placeholder="Search....">
                                        <button class="search-btn" type="submit"><i class="las la-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </div>
  <!--========================== Search Modal End ==========================-->

 


<!--====================banner-two section start here======================-->
<section class="banner-two-section" style="background-image:url(../static/assets/picture/banner-bg.png)">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-md-6">
                <div class="banner-two-content">
                    <h3 class="banner-two-content__subtitle">Save 20 -30% Off</h3>
                    <h1 class="banner-two-content__title">Everything your pet need</h1>
                    <a href="product-category.html" class="btn btn--base-two pill">SHOP NOW</a>
                </div>
            </div>
            <div class="col-md-6 d-md-block d-none">
                <div class="banner-two-section__thumb">
                    <img src="assets/picture/banner-two-img.png" alt="">
                </div>
            </div>
        </div>
    </div>
</section>


<!-- ====================banner-two section end here===================== -->
<!-- =======================category section start here ===============-->

<div class="category-section py-120">
    <div class="container-fluid">
        <div class="row justify-content-center gy-4">
            <div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6">
                <div class="category-item">
                    <a href="product-category.html" class="category-item__thumb">
                        <img src="assets/picture/cate01.png" alt="">
                    </a>
                    <h4 class="category-item__title">
                        <a href="product-category.html" class="category-item__title-link">
                           Accessories
                        </a>
                    </h4>
                </div>
            </div>
            <div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6">
                <div class="category-item">
                    <a href="product-category.html" class="category-item__thumb style-one">
                        <img src="assets/picture/cate02.png" alt="">
                    </a>
                    <h4 class="category-item__title">
                        <a href="product-category.html" class="category-item__title-link">
                            Dog Shop
                         </a>
                    </h4>
                </div>
            </div>
            <div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6">
                <div class="category-item">
                    <a href="product-category.html" class="category-item__thumb style-two">
                        <img src="assets/picture/cate03.png" alt="">
                    </a>
                    <h4 class="category-item__title">
                        <a href="product-category.html" class="category-item__title-link">
                            Cat Shop
                         </a>
                    </h4>
                </div>
            </div>
            <div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6">
                <div class="category-item">
                    <a href="product-category.html" class="category-item__thumb style-three">
                        <img src="assets/picture/cate04.png" alt="">
                    </a>
                    <h4 class="category-item__title">
                        <a href="product-category.html" class="category-item__title-link">
                            Fish Shop
                         </a>
                    </h4>
                </div>
            </div>
            <div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6">
                <div class="category-item">
                    <a href="product-category.html" class="category-item__thumb style-four">
                        <img src="assets/picture/cate05.png" alt="">
                    </a>
                    <h4 class="category-item__title">
                        <a href="product-category.html" class="category-item__title-link">
                            Small Animal
                         </a>
                    </h4>
                </div>
            </div>
            <div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6">
                <div class="category-item">
                    <a href="product-category.html" class="category-item__thumb style-five">
                        <img src="assets/picture/cate06.png" alt="">
                    </a>
                    <h4 class="category-item__title">
                        <a href="product-category.html" class="category-item__title-link">
                            Bird Shop
                         </a>
                    </h4>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ========================category section end here====================-->
<!-- ===========================trending product section start here ====================-->

<div class="trending-product-section pb-120">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-heading-two">
                    <div class="section-heading-two__icon">
                        <img src="assets/picture/heading-img.png" alt="">
                    </div>
                    <div class="section-heading-two__title-wrapper">
                      <h3 class="section-heading-two__title">Trending Products </h3>
                    </div> 
                </div>
            </div>
            </div>
          <div class="row justify-content-center gy-4">
            <div class=" col-lg-3 col-md-6 col-sm-6 col-xsm-6">
                <div class="product-item style-two">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                           <img src="assets/picture/tp-01.png" alt="">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                        <div class="product-item__badge">
                            <span class="badge badge--base-two">-30%</span>
                        </div>
                    </div>
                    <div class="product-item__content">
                      <h5 class="product-item__title">  
                        <a href="product-two-details.html" class="product-item__title-link">
                            Royal Canin Food (2kg) 
                        </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center style-two">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star-half-alt"></i>
                        </li>
                        <li class="product-info__number">
                          4.8
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                        <span class="product-item__price-new">$210</span> $150
                      </h6>
                       <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                    </div>
                </div>
            </div>
            <div class=" col-lg-3 col-md-6 col-sm-6 col-xsm-6">
                <div class="product-item style-two">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                           <img src="assets/picture/tp04.png" alt="">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                    </div>
                    <div class="product-item__content">
                      <h5 class="product-item__title">  
                        <a href="product-two-details.html" class="product-item__title-link">
                            Cat Food  Chicken (2kg)
                        </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center style-two">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star-half-alt"></i>
                        </li>
                        <li class="product-info__number">
                          4.8
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                        <span class="product-item__price-new">$420</span> $350
                      </h6>
                       <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                    </div>
                </div>
            </div>
            <div class=" col-lg-3 col-md-6 col-sm-6 col-xsm-6">
                <div class="product-item style-two">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                           <img src="assets/picture/tp02.png" alt="">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                    </div>
                    <div class="product-item__content">
                      <h5 class="product-item__title">  
                        <a href="product-two-details.html" class="product-item__title-link">
                            Bonnie Cat Food (3kg) 
                        </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center style-two">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star-half-alt"></i>
                        </li>
                        <li class="product-info__number">
                          4.8
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                        <span class="product-item__price-new">$780</span> $650
                      </h6>
                       <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                    </div>
                </div>
            </div>
            <div class=" col-lg-3 col-md-6 col-sm-6 col-xsm-6">
                <div class="product-item style-two">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                           <img src="assets/picture/tp03.png" alt="">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                        <div class="product-item__badge">
                            <span class="badge badge--base-two">new</span>
                        </div>
                    </div>
                    <div class="product-item__content">
                      <h5 class="product-item__title">  
                        <a href="product-two-details.html" class="product-item__title-link">
                            Royal Canin Food (2kg) 
                        </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center style-two">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star-half-alt"></i>
                        </li>
                        <li class="product-info__number">
                          4.8
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                        <span class="product-item__price-new">$210</span> $150
                      </h6>
                       <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                    </div>
                </div>
          </div>
          </div>
    </div>
</div>

<!-- ===========================trending product section start here ====================-->
<!-- =====================feature product section start here =====================-->
<div class="feature-product-section py-120 section-bg-two">
    <div class="feature-product-one">
        <img src="assets/picture/fp-shap01.png" alt="">
    </div>
    <div class="feature-product-two">
        <img src="assets/picture/fp-shap02.png" alt="">
    </div>
    <div class="container">
        <div class="row gy-4">
            <div class="col-lg-12">
                <div class="section-heading-two">
                    <div class="section-heading-two__icon">
                        <img src="assets/picture/heading-img.png" alt="">
                    </div>
                    <div class="section-heading-two__title-wrapper">
                      <h3 class="section-heading-two__title style-two">Featured Products </h3>
                    </div> 
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="filter">
                        <button type="button" data-filter="all" class="style-two mixitup-control-active">All</button>
                        <button type="button" data-filter=".cat" class="style-two">Cat</button>
                        <button type="button" data-filter=".dog" class="style-two">Dog</button>
                        <button type="button" data-filter=".small-pet" class="style-two">Small Pet</button>
                </div>
            </div>
            <div class="product">
                <div class="row justify-content-center gy-4">
                <div class=" col-xl-3 col-sm-6 col-xsm-6 mix cat fish">
                    <div class="product-item style-two">
                        <div class="product-item__thumb">
                            <a href="product-two-details.html" class="product-item__thumb-link">
                               <img src="assets/picture/fp01.png" alt="">
                            </a>
                            <button class="product-item__icon">
                                <span class="product-item__icon-style">
                                  <i class="las la-heart"></i>
                                </span>
                            </button>
                        </div>
                        <div class="product-item__content">
                          <h5 class="product-item__title">  
                            <a href="product-two-details.html" class="product-item__title-link">
                                Bonnie Dog Food 
                                (2.5kg)  
                            </a>
                          </h5>
                          <ul class="product-info__rating justify-content-center style-two">
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star-half-alt"></i>
                            </li>
                            <li class="product-info__number">
                              4.8
                            </li>
                          </ul>
                          <h6 class="product-item__price">
                            <span class="product-item__price-new">$980</span> $850
                          </h6>
                           <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                        </div>
                    </div>
                </div>
                <div class=" col-xl-3 col-sm-6 col-xsm-6 mix small-per dog">      
                    <div class="product-item style-two">
                        <div class="product-item__thumb">
                            <a href="product-two-details.html" class="product-item__thumb-link">
                               <img src="assets/picture/fp02.png" alt="">
                            </a>
                            <button class="product-item__icon">
                                <span class="product-item__icon-style">
                                  <i class="las la-heart"></i>
                                </span>
                            </button>
                        </div>
                        <div class="product-item__content">
                          <h5 class="product-item__title">  
                            <a href="product-two-details.html" class="product-item__title-link">
                                Bonnie Cat Pouch
                                (2kg) 
                            </a>
                          </h5>
                          <ul class="product-info__rating justify-content-center style-two">
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star-half-alt"></i>
                            </li>
                            <li class="product-info__number">
                              4.8
                            </li>
                          </ul>
                          <h6 class="product-item__price">
                            <span class="product-item__price-new">$220</span> $120
                          </h6>
                           <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                        </div>
                    </div>
                </div>
                <div class=" col-xl-3 col-sm-6 col-xsm-6 mix fish cat small-pet">
                    <div class="product-item style-two">
                        <div class="product-item__thumb">
                            <a href="product-two-details.html" class="product-item__thumb-link">
                               <img src="assets/picture/fp04.png" alt="">
                            </a>
                            <button class="product-item__icon">
                                <span class="product-item__icon-style">
                                  <i class="las la-heart"></i>
                                </span>
                            </button>
                        </div>
                        <div class="product-item__content">
                          <h5 class="product-item__title">  
                            <a href="product-two-details.html" class="product-item__title-link">
                                Cat Treats  Squid (400g) 
                            </a>
                          </h5>
                          <ul class="product-info__rating justify-content-center style-two">
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star-half-alt"></i>
                            </li>
                            <li class="product-info__number">
                              4.8
                            </li>
                          </ul>
                          <h6 class="product-item__price">
                            <span class="product-item__price-new">$180</span> $150
                          </h6>
                           <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                        </div>
                    </div>
                </div>
                <div class=" col-xl-3 col-sm-6 col-xsm-6 mix small-pet dog">
                    <div class="product-item style-two">
                        <div class="product-item__thumb">
                            <a href="product-two-details.html" class="product-item__thumb-link">
                               <img src="assets/picture/fp03.png" alt="">
                            </a>
                            <button class="product-item__icon">
                                <span class="product-item__icon-style">
                                  <i class="las la-heart"></i>
                                </span>
                            </button>
                        </div>
                        <div class="product-item__content">
                          <h5 class="product-item__title">  
                            <a href="product-two-details.html" class="product-item__title-link">
                                Coco Kat Kitten Milk (3kg)  
                            </a>
                          </h5>
                          <ul class="product-info__rating justify-content-center style-two">
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star"></i>
                            </li>
                            <li class="product-info__rating-item">
                              <i class="fas fa-star-half-alt"></i>
                            </li>
                            <li class="product-info__number">
                              4.8
                            </li>
                          </ul>
                          <h6 class="product-item__price">
                            <span class="product-item__price-new">$360</span> $310
                          </h6>
                           <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>


<!-- =====================feature product section end here =====================-->
<!-- ========================arrival-two section start here =======================-->
<div class="arrival-two-section py-120">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-heading-two">
                    <div class="section-heading-two__icon">
                        <img src="assets/picture/heading-img.png" alt="">
                    </div>
                    <div class="section-heading-two__title-wrapper">
                      <h3 class="section-heading-two__title"> New Arrivals </h3>
                    </div> 
                </div>
            </div>
        </div>
        <div class="row justify-content-center gy-4">
            <div class=" col-xl-3 col-lg-3 col-sm-6 col-xsm-6">
                <div class="product-item style-two">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                           <img src="assets/picture/arrival-two01.png" alt="">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                        <div class="product-item__badge">
                            <span class="badge badge--base-two">-30%</span>
                        </div>
                    </div>
                    <div class="product-item__content">
                      <h5 class="product-item__title">  
                        <a href="product-two-details.html" class="product-item__title-link">
                            Bonnie Dog Food (5kg)
                        </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center style-two">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star-half-alt"></i>
                        </li>
                        <li class="product-info__number">
                          4.8
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                        <span class="product-item__price-new">$210</span> $150
                      </h6>
                       <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                    </div>
                </div>
            </div>
            <div class=" col-xl-3 col-lg-3 col-sm-6 col-xsm-6">
                <div class="product-item style-two">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                           <img src="assets/picture/arrival-two02.png" alt="">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                    </div>
                    <div class="product-item__content">
                      <h5 class="product-item__title">  
                        <a href="product-two-details.html" class="product-item__title-link">
                            Cat Food  Chicken (2kg) 
                        </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center style-two">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__number">
                          5.0
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                        <span class="product-item__price-new">$320</span> $260
                      </h6>
                       <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                    </div>
                </div>
            </div>
            <div class=" col-xl-3 col-lg-3 col-sm-6 col-xsm-6">
                <div class="product-item style-two">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                           <img src="assets/picture/arrival-two03.png" alt="">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                        <div class="product-item__badge">
                            <span class="badge badge--base-two">new</span>
                        </div>
                    </div>
                    <div class="product-item__content">
                      <h5 class="product-item__title">  
                        <a href="product-two-details.html" class="product-item__title-link">
                            Royal Canin Food (2kg) 
                        </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center style-two">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__number">
                          5.0
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                        <span class="product-item__price-new">$210</span> $150
                      </h6>
                       <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                    </div>
                </div>
            </div>
            <div class=" col-xl-3 col-lg-3 col-sm-6 col-xsm-6">
                <div class="product-item style-two">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                           <img src="assets/picture/arrival-two04.png" alt="">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                    </div>
                    <div class="product-item__content">
                      <h5 class="product-item__title">  
                        <a href="product-two-details.html" class="product-item__title-link">
                            Bonnie Cat Food (4g)
                        </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center style-two">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star-half-alt"></i>
                        </li>
                        <li class="product-info__number">
                          4.8
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                        <span class="product-item__price-new">$28</span> $158
                      </h6>
                       <a href="cart.html" class="btn btn--base-two pill btn--sm">Add to Cart </a>
                    </div>
                </div>
          </div>
        </div>
    </div>
</div>


<!-- ========================arrival-two section end here =========================-->
<!-- ====================add section start here=======================-->
<div class="add-section pb-60">
    <div class="container">
        <div class="row gy-4">
            <div class="col-sm-6">
                <a href="product-category.html" class="add-one">
                    <img src="assets/picture/add-img01.png" alt="">
                </a>
            </div>
            <div class="col-sm-6">
                <div class="row gy-4">
                    <div class="col-lg-12">
                        <a href="product-category.html" class="add-one">
                            <img src="assets/picture/add-img02.png" alt="">
                        </a>
                    </div>
                    <div class="col-lg-12">
                     <a href="product-category.html" class="add-one">
                        <img src="assets/picture/add-img03.png" alt="">
                     </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- =====================add section end here =====================-->
<!-- =====================testimonial two section start here ====================-->

<div class="testimonial-two-section bg-img " style="background-image: url(../static/assets/picture/test-two0.png);">
    <div class="container-fluid">
        <div class="row align-items-center flex-wrap justify-content-center">
            <div class="col-lg-6">
                <div class="testimonial-two-thumb">
                    <div class="testimonial-thumb">
                        <img src="assets/picture/t-2.png" alt="">
                    </div>  
                    <div class="testimonial-thumb">
                        <img src="assets/picture/testimonial-img.png" alt="">
                    </div>  
                    <div class="testimonial-thumb">
                        <img src="assets/picture/t-3.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
               <div class="testimonial-two-slick-slider">
                   <div class="testimonial-two-slider">
                    <h4 class="testimonial-two-slider__review">
                        Customer Review
                        <span class="testimonial-two-slider__review-shape">
                            <img src="assets/picture/review-shape.png" alt="">
                        </span>
                    </h4>
                    <p class="testimonial-two-slider__desc">
                        A great about us block helps builds trubetween you customers. The more content you provide about you and your business Lorem ipsum dolor, sit amet consectetur adipisicing.
                    </p>
                    <div class="testimonial-two-slider__details">
                        <h4 class="testimonial-two-slider__name">Dianne Russell</h4>
                        <span class="testimonial-two-slider__designation">Customer </span>
                    </div>
                   </div>
                   <div class="testimonial-two-slider">
                    <h4 class="testimonial-two-slider__review">
                        Customer Review
                        <span class="testimonial-two-slider__review-shape">
                            <img src="assets/picture/review-shape.png" alt="">
                        </span>
                    </h4>
                    <p class="testimonial-two-slider__desc">
                        A great about us block helps builds trubetween you customers. The more content you provide about you. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, unde?
                    </p>
                    <div class="testimonial-two-slider__details">
                        <h4 class="testimonial-two-slider__name">Johnson</h4>
                        <span class="testimonial-two-slider__designation">Customer </span>
                    </div>
                   </div>
                   <div class="testimonial-two-slider">
                    <h4 class="testimonial-two-slider__review">
                        Customer Review
                        <span class="testimonial-two-slider__review-shape">
                            <img src="assets/picture/review-shape.png" alt="">
                        </span>
                    </h4>
                    <p class="testimonial-two-slider__desc">
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit.The more content you provide about you. Lorem, Quos saepe suscipit, nemo dolore sapiente delectus iste cum!
                    </p>
                    <div class="testimonial-two-slider__details">
                        <h4 class="testimonial-two-slider__name"> James Rodrigo</h4>
                        <span class="testimonial-two-slider__designation">Customer </span>
                    </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- =====================testimonial two section start Here==================-->
<!-- ======================news post section start here============-->
<div class="news-post-section py-60">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-heading-two">
                    <div class="section-heading-two__icon">
                        <img src="assets/picture/heading-img.png" alt="">
                    </div>
                    <div class="section-heading-two__title-wrapper">
                      <h3 class="section-heading-two__title"> latest News Post </h3>
                    </div> 
                </div>
            </div>
        </div>
        <div class="row justify-content-center gy-4">
            <div class="col-lg-4 col-sm-6 col-xsm-6">
                <div class="news-post-item">
                    <div class="news-post-item__thumb">
                        <a href="blog-details.html" class="news-post-item__thumb-link">
                            <img src="assets/picture/np01.png" alt="">
                        </a>
                    </div>
                    <div class="news-post-item__date style-one">
                        <span class="news-post-item__month">29</span>
                        <span class="news-post-item__month">May</span>
                    </div>
                    <div class="news-post-item__content">
                        <h4 class="news-post-item__title"><a href="blog-details.html" class="news-post-item__title-link">Amet Occumsan Fringilla Molestie Urna Hendrerit  </a></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xsm-6">
                <div class="news-post-item">
                    <div class="news-post-item__thumb">
                        <a href="blog-details.html" class="news-post-item__thumb-link">
                            <img src="assets/picture/np02.png" alt="">
                        </a>
                    </div>
                    <div class="news-post-item__date style-two">
                        <span class="news-post-item__month">18</span>
                        <span class="news-post-item__month">May</span>
                    </div>
                    <div class="news-post-item__content">
                        <h4 class="news-post-item__title"><a href="blog-details.html" class="news-post-item__title-link"> Wenean vitae porttitor ante tempor posuere nisl.  </a></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xsm-6">
                <div class="news-post-item">
                    <div class="news-post-item__thumb">
                        <a href="blog-details.html" class="news-post-item__thumb-link">
                            <img src="assets/picture/np03.png" alt="">
                        </a>
                    </div>
                    <div class="news-post-item__date style-three">
                        <span class="news-post-item__month">22</span>
                        <span class="news-post-item__month">May</span>
                    </div>
                    <div class="news-post-item__content">
                        <h4 class="news-post-item__title"><a href="blog-details.html" class="news-post-item__title-link"> Maecenas sed facilisis ipsum. Duis scelerisque mi magna </a></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xsm-6 d-lg-none d-block">
                <div class="news-post-item">
                    <div class="news-post-item__thumb">
                        <a href="blog-details.html" class="news-post-item__thumb-link">
                            <img src="assets/picture/np01.png" alt="">
                        </a>
                    </div>
                    <div class="news-post-item__date style-one">
                        <span class="news-post-item__month">29</span>
                        <span class="news-post-item__month">May</span>
                    </div>
                    <div class="news-post-item__content">
                        <h4 class="news-post-item__title"><a href="blog-details.html" class="news-post-item__title-link">Amet Occumsan Fringilla Molestie Urna Hendrerit  </a></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- ======================news post section end here============-->
<div class="feature-two-section py-60">
    <div class="container">
        <div class="row gy-4 ">
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item style-two">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/ft-img01.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FREE SHIPPING
                        </h5>
                        <span class="feature-item__payment"> For All Order Over $99 </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item style-two">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/ft-img02.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FRIENDLY SUPPORT
                        </h5>
                        <span class="feature-item__payment"> 24/7 Customer Support </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item style-two">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/ft-img03.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SECURE PAYMENT
                        </h5>
                        <span class="feature-item__payment">100%  Secure Payment</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item style-two">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/ft-img04.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SHIPPING & RETURN
                        </h5>
                        <span class="feature-item__payment"> within 30days For Refund </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ===========add two section start here =========-->
<div class="add-two-section pt-60">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <a href="product-category.html" class="add-two-thumb">
                    <img src="assets/picture/add-two01.png" alt="">
                </a>
            </div>
        </div>
    </div>
</div>


<!-- ===========add two section end here =========-->


<!-- ========footer===== -->
<footer class="footer-two-area">
    <div class="footer-two__top-shape">
        <img src="assets/picture/footer-top-shape.png" alt="">
    </div>
    <div class="footer-two__shape-one">
        <img src="assets/picture/footer-shape-one.png" alt="">
    </div>
    <div class="footer-two__shape-two">
        <img src="assets/picture/footer-shape-two.png" alt="">
    </div>
    <div class="footer-two-area__inner">
        <div class="container">
            <div class="row justify-content-center gy-5">
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <div class="footer-item__logo">
                            <a href="index.html"> <img src="assets/picture/h2-logo.png" alt=""></a>
                        </div>
                        <p class="footer-item__desc"> Maecenas tempus tellus eget cdimentum rhoncus sem quam semper </p>
                         <div class="footer-item__number">
                            <span class="footer-item__text">
                                CALL US 
                            </span>
                           <a href="javascript:;" class="footer-item__link d-block">000 - 8888 - 9999</a>
                         </div> 
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Links</h5>
                        <ul class="footer-menu style-two">
                            <li class="footer-menu__item"><a href="about.html" class="footer-menu__link"> About Us</a></li>
                            <li class="footer-menu__item"><a href="faq.html" class="footer-menu__link"> Faq</a></li>
                            <li class="footer-menu__item"><a href="cart.html" class="footer-menu__link">Shopping Cart </a></li>
                            <li class="footer-menu__item"><a href="blog.html" class="footer-menu__link"> Blog</a></li>
                            <li class="footer-menu__item"><a href="javascript:;" class="footer-menu__link"> Product Details</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Useful Link </h5>
                        <ul class="footer-menu style-two">
                            <li class="footer-menu__item"><a href="product-category.html" class="footer-menu__link"> Product Category </a></li>
                            <li class="footer-menu__item"><a href="check-out.html" class="footer-menu__link">Checkout </a></li>
                            <li class="footer-menu__item"><a href="login.html" class="footer-menu__link">Login </a></li>
                            <li class="footer-menu__item"><a href="registration.html" class="footer-menu__link"> Registration </a></li>
                            <li class="footer-menu__item"><a href="contact.html" class="footer-menu__link"> Contact Us </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <p class="footer-item__desc style-two">Subscribe to our newsletter and get 10% off your first purchase..</p>
                        <div class="subscriber-form mb-3">
                            <input type="text" class="form-control form--control" placeholder="Email Address" aria-label="Recipient's username">
                            <button class="btn btn--base-two subscribe-button"><i class="fas fa-paper-plane"></i></button>
                          </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- Footer Top End-->
  
    <!-- bottom Footer -->
    <div class="bottom-footer style-two py-lg-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bottom-footer__text"> &copy; Copyright 2023 . All rights by Viserpet.</div>
                </div>
            </div>
        </div>
    </div>
  </footer>
<!-- Jquery js -->
<script src="assets/js/jquery-3.6.1.min.js"></script>
<!-- Popper js -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Slick js -->
<script src="assets/js/slick.min.js"></script>
<!-- mixitup js -->
<script src="assets/js/mixitup.min.js"></script>
<!-- countdown js -->
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.throttle.js"></script>
<script src="assets/js/jquery.classycountdown.min.js"></script>
<!-- range js -->
<script src="assets/js/jquery-ui.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
 <!-- main js -->
 <script src="assets/js/main.js"></script>

 <script>
    // mixitup 
   var mixer = mixitup('.product');
</script>
</body>
</html>
